<script lang="jsx">
import { defineComponent, ref } from 'vue'
import { ElButton, ElInput, ElSelect } from 'element-plus'
import { h } from 'vue'
export default defineComponent({
  name: 'MyComponent',
  props: {
    msg: {
      type: String,
      default: '找不到组件'
    }
  },
  // emits: ['update:modelValue'],
  setup(props, { emit }) {
    const inputValue = ref('123')
    const nodeArr = [
      {
        name: 'button',
        component: ElButton,
        props: {
          type: 'danger',
          plain: true,
          innerHTML: '按钮',
          onClick: () => {
            console.log(inputValue.value)
          }
        }
      },
      {
        name: 'input',
        component: ElInput,
        props: {
          placeholder: '请输入内容',
          style: { width: '200px' }
        }
      },
      {
        name: 'div',
        component: 'div',
        props: {
          class: 'example',
          innerHTML: props.msg,
          type: 'primary'
        }
      }
    ]
    const vnode = h(
      'div', // type
      // { class: 'example' }, // props
      [
        /* children */
        nodeArr.map(item => {
          return h(item.component, item.props)
        })
      ]
    )
    return () => vnode
  }
})
</script>

<style lang="scss">
.example {
  // color: red;
}
</style>
